<template>
<div class="title">
  <!-- 背景图 -->
  <div>
  <img :src="pic" alt="" class="pic">
  <!-- 登录 -->
  <div class="info">
    <div class="info_1">
      <img src="http://inews.gtimg.com/newsapp_bt/0/13752988131/1000" alt="" class="inif_img">
    </div>
    <div class="title_txt">{{userName}}</div>
    <van-button type="primary" size="small" to="/Login" v-if="show">去登陆</van-button>
    <van-button type="primary" size="small" @click="quit" v-if="!show">退出登录</van-button>
    <div v-if="!show">编辑个人资料➡</div>
  </div>
  </div>
  <!-- 下面六个icon -->
  <van-grid :column-num="3" class="six" :clickable='true'>
  <!-- <van-grid-item v-for="(item,i) in sixIcon" :key="i" :icon="item.icon" :text="item.txt" ref="i" @click="cli"/> -->
   <van-grid-item :icon="sixIcon[0].icon" @click="coll" :text="sixIcon[0].txt"/>
   <van-grid-item :icon="sixIcon[1].icon" @click="Published"  :text="sixIcon[1].txt"/>
   <van-grid-item :icon="sixIcon[2].icon"  :text="sixIcon[2].txt"/>
   <van-grid-item :icon="sixIcon[3].icon"  :text="sixIcon[3].txt"/>
   <van-grid-item :icon="sixIcon[4].icon"  :text="sixIcon[4].txt"/>
   <van-grid-item :icon="sixIcon[5].icon"  :text="sixIcon[5].txt"/>

</van-grid>
<!-- 底部广告图片 -->
<div class="bom">
  <img src="http://liufusong.top:8080/img/profile/join.png" alt="">
</div>
</div>
</template>

<script>
import { Dialog } from 'vant'
import { information } from '@/api'
export default {
  data () {
    return {
      // 判断是否显示
      show: true,
      // 接受token
      token: localStorage.getItem('token'),
      // 用户名
      userName: '游客',
      // 背景图片
      pic: 'http://liufusong.top:8080/img/profile/bg.png',
      sixIcon: [
        {
          txt: '我的收藏',
          icon: 'star-o'
        },
        {
          txt: '我的出租',
          icon: 'wap-home-o'
        },
        {
          txt: '看房记录',
          icon: 'clock-o'
        },
        {
          txt: '成为房主',
          icon: 'debit-pay'
        },
        {
          txt: '个人资料',
          icon: 'contact'
        },
        {
          txt: '联系我们',
          icon: 'service-o'
        }
      ]
    }
  },

  // 获取用户信息
  async created () {
    console.log(this.token)
    // if (!this.token) {
    //   this.show = true
    // } else {
    //   this.show = false
    //   const res = await information(this.token)
    //   console.log(res)
    //   this.userName = res.data.body.nickname
    //   this.pic = 'http://liufusong.top:8080' + res.data.body.avatar
    // }

    const res = await information(this.token)
    if (res.data.status !== 200) {
      this.show = true
    } else {
      this.show = false

      console.log(res)
      this.userName = res.data.body.nickname
      this.pic = 'http://liufusong.top:8080' + res.data.body.avatar
    }
  },
  methods: {
    quit () {
      Dialog.confirm({
        title: '提示',
        message: '确定要退出吗'
      }).then(() => {
        localStorage.removeItem('token')
        this.show = true
        this.userName = '游客'
        this.pic = 'http://liufusong.top:8080/img/profile/bg.png'
      })
        .catch(() => {

        })
    },
    coll () {
      if (this.token) {
        this.$router.replace('/Collect')
      } else {
        this.$router.replace('/Login')
      }
    },
    Published () {
      if (this.token) {
        this.$router.replace('/Published')
      } else {
        this.$router.replace('/Login')
      }
    }

  }

}
</script>

<style lang="less" scoped>
img {
  width: 100%;
}
.info {
  position: absolute;
    background: #fff;
    width: 70%;
    height: 170px;
    top: 160px;
    // bottom: 200px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px 3px #ddd;
    // margin: 10px auto 0;
    padding: 0 20px;
    text-align: center;
    font-size: 13px;
}
.title {
    min-height: 200px;
    position: relative;
}
.info_1 {
    position: relative;
    transform: translateY(-50%);
    border-radius: 50%;
    width: 70px;
    height: 70px;
    border: 5px solid #f5f5f5;
    display: inline-block;
    box-shadow: 0 2px 2px #bdbdbd;
}
.inif_img {
    width: 100%;
    border-radius: 50%;
}
.title_txt {
      margin-top: -25px;
    margin-bottom: 15px;
}
.six {
  position: absolute;
  top: 320px;
}
.bom {
  padding: 8px;
  text-align: center;
  position: absolute;
  top: 510px;
}
.pic {
  display: inline;
}
</style>
